<template>
  <div>
    <h2>百度地图测试</h2>
    <div class="bmap" id="container"></div>
  </div>
</template>
  
  <script lang="ts" setup>
import { onMounted } from "vue";

onMounted(() => {
  var map = new window.BMapGL.Map("container");
  var point = new BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(point, 18);
  map.enableScrollWheelZoom(true);
  var label = new window.BMapGL.Label("疲劳地点", {
    position: point, // 设置标注的地理位置
    offset: new window.BMapGL.Size(0, 0), // 设置标注的偏移量
  });
  // 添加标签
  map.addOverlay(label); // 将标注添加到地图中
  label.setStyle({
    fontSize: "32px",
    color: "red",
  });

  var marker = new window.BMapGL.Marker(point); // 创建标注
  map.addOverlay(marker); // 将标注添加到地图中
  var scaleCtrl = new window.BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new window.BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);
  var cityCtrl = new window.BMapGL.CityListControl(); // 添加城市列表控件
  map.addControl(cityCtrl);
});
</script>
  
  <style scoped>
.bmap {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>
  
  